<template>
  <div id="AddTicket">
    <main-header :title="headTitle" :crumbsArr="crumbsArr" />
    <div class="main_wrapper" >
      <div class="main">
        <el-form
          :model="formData" :rules="formRules" ref="formData"
          label-width="100px" class="demo-ruleForm"
          v-loading="saveLoading"
        >
          <el-form-item label="券类型">
            <el-radio-group v-model="formData.type">
              <el-radio :label="1">抵用券</el-radio>
              <el-radio :label="2">活动券</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="券名称" prop="name">
            <el-input v-model="formData.name"></el-input>
          </el-form-item>
          <el-form-item label="有效期" prop="beginEndTime">
            <el-date-picker
              v-model="formData.beginEndTime"
              type="datetimerange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期">
            </el-date-picker>
            <!--<el-date-picker-->
              <!--v-model="formData.beginEndTime"-->
              <!--type="daterange"-->
              <!--range-separator="至"-->
              <!--start-placeholder="开始日期"-->
              <!--end-placeholder="结束日期">-->
            <!--</el-date-picker>-->
          </el-form-item>
          <el-form-item label="描述" prop="ticket_desc">
            <el-input v-model="formData.ticket_desc"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="saveTicketBtnClick('formData')">保 存</el-button>
            <el-button @click="closeAddPage">取 消</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>

    <!-- 保存/发布 确认对话框 -->
    <el-dialog
      title="提示"
      :visible.sync="saveTicketVisible"
      width="30%"
    >
      <span>确认保存？</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="saveTicketVisible = false">取 消</el-button>
        <el-button type="primary" @click="saveTicket">确 定</el-button>
      </span>
    </el-dialog>

  </div>
</template>

<script>
import moment from 'moment'
import API from '@/config/api.js'
import ErrorConfig from '@/config/error.config.js'
import MainHeader from '@/components/layouts/MainHeader'
export default {
  name: 'AddTicket',
  data () {
    return {
      crumbsArr: [ // 面包屑
        { name: 'welcome', txt: '首页' }, { name: 'ticket', txt: '奖券管理' }, { txt: '奖券新增' }
      ],
      headTitle: '新增奖券',
      saveTicketVisible: false,
      saveLoading: false,
      formData: {
        type: 1,
        name: '',
        beginTime: '',
        endTime: '',
        ticket_desc: '',
        beginEndTime: ''
      },
      formRules: {
        name: [
          { required: true, message: '请输入券名称', trigger: 'blur' }
        ],
        beginEndTime: [
          { required: true, message: '请选择有效期', trigger: 'blur' }
        ],
        ticket_desc: [
          { required: true, message: '请输入描述', trigger: 'blur' }
        ]
      }
    }
  },
  // beforeRouteEnter (to, from, next) {
  //   next(vm => vm.)
  // },
  watch: {
    'formData.beginEndTime' (val, oldVal) { // 监听有效期数据
      this.formData.beginTime = moment(val[0]).format('YYYY-MM-DD HH:mm:ss')
      this.formData.endTime = moment(val[1]).format('YYYY-MM-DD HH:mm:ss')
    },
    '$route' (to, from) {
      let arr = this.crumbsArr
      if (to.name === 'ticket_add') {
        arr[arr.length - 1].txt = '奖券新增'
      }
      if (to.name === 'ticket_edit') {
        arr[arr.length - 1].txt = '奖券编辑'
      }
      this.crumbsArr = Object.assign([], arr)
    }
  },
  components: {
    MainHeader
  },
  methods: {
    closeAddPage () {
      this.$router.push({name: 'ticket'})
    },
    saveTicketBtnClick (formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.saveTicketVisible = true
        } else {
          return false
        }
      })
    },
    async saveTicket () {
      this.saveTicketVisible = false
      this.saveLoading = true
      const response = await API.saveTicket(this.formData)
      this.saveLoading = false
      const { code } = response
      if (code === 1) {
        this.$router.push({name: 'ticket'})
        this.$message({
          message: '保存成功',
          type: 'success'
        })
      } else {
        if (code === -1) {
          const { msg } = response
          this.$message.error(msg)
        } else {
          this.$message.error(ErrorConfig[code])
        }
      }
    }
  }
}
</script>

<style scoped lang="scss">
  #AddTicket {
    .main_wrapper {
      padding: 20px 20px 0;
      .main {
        box-sizing: border-box;
        padding: 20px;
        border-radius: 4px;
        background: #fff;
        .el-form-item {
          width: auto;
          max-width: 800px;
          .el-date-picker {
            width: 100%;
          }
        }
      }
    }
  }
</style>
